.checkbox-label {
  display: flex;
  margin: 10px;
  flex-direction: row;
  align-items: center;
}

.checkbox {
  margin-right: 10px;
}

.li {
	position: relative;
  padding-left: 20px;
	border-bottom: 1px solid #ededed;
}

.last-child {
	border-bottom: none;
}

.li .editing {
	border-bottom: none;
  padding: 0;
  height: 80px;
}

.li .editing .edit {
	display: block;
	width: calc(100% - 115px);
  position: relative;
  left: 100px;
	margin: 0;
	font-size: 30px;
  font-family: inherit;
  line-height: 65px;
  height: 65px;
	border: 0;
	color: inherit;
	padding: 6px;
	border: 1px solid #999;
	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
}

.li .editing .view {
	display: none;
}

.li .checkbox {
  opacity: 0;
}

.toggle {
  display: flex;
  align-content: center;
  // padding: 15px 15px 15px 60px;
  height: 80px;
}


.li .label {
	/*
		Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
	*/
	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
	background-repeat: no-repeat;
  background-position: center left;
  padding-left: 45px;
  padding-right: 60px;
	// display: block;
	line-height: 100px;
}

.li .label.checked {
	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
}

.li .text {
  flex: 1;
  height: 80px;
  line-height: 80px;
}

.li .text {
  word-break: break-all;
	// display: block;
  transition: color 0.4s;
  font-size: 30px;
}

.li .completed .text {
	color: #d9d9d9;
	text-decoration: line-through;
}

.li .destroy {
	position: absolute;
	top: 0;
	right: 10px;
	bottom: 0;
	width: 40px;
  height: 40px;
  line-height: 70px;
	font-size: 50px;
	color: #cc9a9a;
	margin-bottom: 11px;
	transition: color 0.2s ease-out;
}

.li .destroy:hover {
	color: #af5b5e;
}

.li .destroy:after {
	content: '×';
}

.li:hover .destroy {
	display: block;
}

.li .edit {
	display: none;
}

